<template>
  <!-- nodeList：这是一个包含节点类型的数组。在此例中，节点类型包括 'rect'、'circle' 和 'aa'，这些类型代表不同形状的节点。

v-for：通过 v-for 指令遍历 nodeList，每个节点类型都会渲染一个对应的节点形状，并且设置了拖拽属性。
每个节点形状都具有 draggable="true" 属性，允许用户拖动该节点。

@dragend：当拖动结束时，触发 addNode 方法，向父组件发送一个 addNode 事件。
该事件携带着节点的类型（type）以及拖动结束时的鼠标位置（x 和 y 坐标）。

emit('addNode', { type, x, y })：通过 emit 方法，子组件（NodePanel）向父组件（即画布部分）发送一个事件，
通知父组件要添加一个新节点。父组件会接收到这个事件，传递一个包含节点类型和位置的对象。 -->
  <div class="node_panel">
    <div v-for="item in Object.keys(nodeList)" :key="item" class="node_li">
      <div
        :class="['item_shape', `iconfont ${item}`]"
        draggable="true"
        @dragend="addNode(nodeList[item], item, $event)"
      ></div>
      <div>{{ item }}</div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["addNode"]);

// 节点列表
const nodeList = {
  "icon-shuju": "\ue7d1",
  "icon-xinxifankui": "\ue61f",
  "icon-xiaochengxu": "\ue63c",
};

// 添加节点
function addNode(type, item, e) {
  emit("addNode", {
    type,
    item,
    x: e.x,
    y: e.y,
  });
}
</script>

<style lang="scss" scoped>
.node_panel {
  position: absolute;
  left: 10px;
  top: 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  padding: 10px 4px;
  border-radius: 4px;
}

.node_li {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  user-select: none;

  &:last-child {
    margin-bottom: 0;
  }
}

.item_shape {
  width: 20px;
  height: 20px;
  // border: 1px solid #ccc;
}
</style>
